<template>
    <div class="app-container">
        <el-form :model="main.queryParams" size="small" :inline="true" v-show="main.showSearch">
            <el-form-item label="选择酒店" prop="hotelName">
                <el-select v-model="main.queryParams.hotelId" filterable placeholder="请选择"
                    @change="handleRoomStatusQuery">
                    <el-option v-for="item in main.hotelListAll" :key="item.hotelId" :label="item.hotelName"
                        :value="item.hotelId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini"
                    @click="handleRoomStatusQuery">搜索</el-button>
                <el-button size="mini" @click="positioningTime('front')">前十天</el-button>
                <el-date-picker v-model="main.startTime" type="date" placeholder="选择日期"
                    style="margin-left: 10px;margin-right: 10px;" @change="startTimeChange">
                </el-date-picker>
                <el-button size="mini" @click="positioningTime('after')">后十天</el-button>
                <el-button type="primary" size="mini" @click="openBatchSwitchRoom">批量开关房</el-button>
                <el-button type="primary" size="mini" @click="openRoomStatusLog">房态日志</el-button>
                <el-button type="success" icon="el-icon-view" size="mini" :loading="main.priceShowLoading"
                    @click="getPriceShowAllList">露出查询</el-button>
            </el-form-item>

        </el-form>

        <el-table v-loading="main.loading" :data="main.roomStatusList" class="roomStatusTable"
            :row-class-name="roomStatusDataRowClassName" :key="main.tableKey" border>
            <el-table-column v-for="column in main.columnList" :label="column.columnName">
                <template slot-scope="scope">
                    <span v-if="dynamicFields(scope.row, column.type) == '1'">{{ dynamicFields(scope.row,
                        column.houseName) }}</span>
                    <span v-if="dynamicFields(scope.row, column.type) == '2'">{{ dynamicFields(scope.row,
                        column.houseRpName) }}</span>
                </template>
            </el-table-column>

            <el-table-column v-for="column in main.columnList1" :label="column.columnName">
                <template slot-scope="scope">
                    <div v-if="dynamicFields(scope.row, column.type) == '1'" class="houseRowClass">
                        <div class="modifyInput" @click="openUpdateHouseDimension(scope.row, column.dataDay)">
                            {{ dynamicFields(scope.row, column.yQuantityNum) }}/{{ dynamicFields(scope.row,
                                column.nQuantityNum) }}
                        </div>

                        <div>
                            <el-switch :value="dynamicEStatus(dynamicFields(scope.row, column.houseStatus))"
                                active-color="#13ce66" inactive-color="#ff4949" :width=35
                                @change="openUpdateHouseDimension(scope.row, column.dataDay)">
                            </el-switch>
                        </div>
                    </div>

                    <div v-if="dynamicFields(scope.row, column.type) == '2'" class="RPRowClass">
                        <div class="modifyInput" style="color: red;"
                            @click="openUpdateRpDimension(scope.row, column.dataDay)">
                            {{ dynamicFields(scope.row, column.ePrice) }}
                        </div>
                        <div :style="{ color: getColor(scope.row['show_' + column.dataDay.replaceAll('-', '_')]) }">
                            {{ scope.row["show_" + column.dataDay.replaceAll('-', '_')] }}
                        </div>
                        <div>
                            {{ dynamicFields(scope.row, column.rpPrice) }}
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column v-for="column in main.columnList2" :label="column.columnName" align="center">
                <template slot-scope="scope">
                    <span v-if="dynamicFields(scope.row, column.type) == '1'" class="modifyInput">
                        <el-button size="mini" type="text"
                            @click="openUpdateHouseDimension(scope.row, '')">修改库存</el-button>
                        <el-button size="mini" type="text"
                            @click="postShelvesHouse(scope.row.houseId, scope.row.hotelId)">下线</el-button>
                    </span>
                    <span v-if="dynamicFields(scope.row, column.type) == '2'">
                        <el-button size="mini" type="text"
                            @click="openUpdateRpDimension(scope.row, '')">物理房型</el-button>
                        <el-button size="mini" type="text" @click="postShelvesRp(scope.row.rpId)">下线</el-button>
                    </span>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改房态" :visible.sync="updateHouseDimension.isShow" width="515px" append-to-body>
            <el-form ref="updateHouseDimensionRef" :model="updateHouseDimension.form" label-width="90px"
                :rules="updateHouseDimension.rules">
                <el-form-item label="房型类型">
                    <el-input v-model="updateHouseDimension.form.houseName" :disabled="true" />
                </el-form-item>
                <el-form-item label="适用日期" prop="rqRange">
                    <el-date-picker v-model="updateHouseDimension.form.rqRange" value-format="yyyy-MM-dd"
                        type="daterange" range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="保留房量">
                    <el-input v-model="updateHouseDimension.form.yQuantityNum" placeholder="关房状态设置保留房为0" />
                </el-form-item>
                <el-form-item label="非保留房量">
                    <el-input v-model="updateHouseDimension.form.nQuantityNum" placeholder="不变不填" />
                </el-form-item>
                <el-form-item label="开关房">
                    <el-radio :disabled="isYQuantityNumEmpty" v-model="updateHouseDimension.form.roomStatus"
                        label="1">不变</el-radio>
                    <el-radio v-model="updateHouseDimension.form.roomStatus" label="2">开房</el-radio>
                    <el-radio :disabled="isYQuantityNumEmpty" v-model="updateHouseDimension.form.roomStatus"
                        label="3">关房</el-radio>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postUpdateHouseDimension">确 定</el-button>
                <el-button @click="cancelUpdateHouseDimension">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="updateRpDimension.isShow" width="515px" append-to-body>

            <div slot="title" style="display: flex;">
                <span>修改价格</span>
                <WeekEnd :hotelId="main.queryParams.hotelId" :key="main.queryParams.hotelId" class="weekEndVue" />
            </div>

            <el-form ref="updateRpDimensionRef" :model="updateRpDimension.form" label-width="90px"
                :rules="updateRpDimension.rules">
                <el-form-item label="房型类型">
                    <el-input v-model="updateRpDimension.form.houseRpName" :disabled="true" />
                </el-form-item>
                <el-form-item label="适用日期" prop="rqRange">
                    <el-date-picker v-model="updateRpDimension.form.rqRange" value-format="yyyy-MM-dd" type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="房价" prop="ePrice">
                    <el-input v-model="updateRpDimension.form.ePrice" />
                </el-form-item>

                <el-form-item label="周末价" prop="ePriceWeekend">
                    <el-input v-model="updateRpDimension.form.ePriceWeekend" />
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="postUpdateRpDimension" :loading="updateRpDimension.loading">确
                    定</el-button>
                <el-button @click="cancelUpdateRpDimension">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="批量开关房" :visible.sync="batchSwitchRoom.isShow" width="515px" append-to-body>
            <el-form ref="batchSwitchRoomRef" :model="batchSwitchRoom.form" label-width="90px"
                :rules="batchSwitchRoom.rules">
                <el-form-item label="适用日期" prop="rqRange">
                    <el-date-picker v-model="batchSwitchRoom.form.rqRange" value-format="yyyy-MM-dd" type="daterange"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                </el-form-item>

                <el-form-item label="开关" prop="switchRoom">
                    <el-switch :value="batchSwitchRoom.form.switchRoom" active-color="#13ce66" inactive-color="#ff4949"
                        :width=35 @change="handleSwitchRoomChange">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :loading="batchSwitchRoom.loading" @click="postBatchSwitchRoom">确
                    定</el-button>
                <el-button @click="cancelBatchSwitchRoom">取 消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="房态日志" :visible.sync="roomStatusLog.isShow" width="1400px" append-to-body>
            <el-form :model="roomStatusLog.queryParams" size="small" :inline="true">
                <el-form-item label="房型ID" prop="houseId">
                    <el-input v-model="roomStatusLog.queryParams.houseId" placeholder="请输入房型ID" />
                </el-form-item>
                <el-form-item label="操作类型" prop="logType">
                    <el-select v-model="roomStatusLog.queryParams.logType" multiple filterable clearable
                        placeholder="请选择">
                        <el-option label="采购价" value="采购价"></el-option>
                        <el-option label="出售价" value="出售价"></el-option>
                        <el-option label="开关房" value="房态"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期范围" prop="dateRange">
                    <el-date-picker v-model="roomStatusLog.queryParams.dateRange" type="datetimerange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini"
                        @click="handleroomStatusLogQuery">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="roomStatusLog.logData" v-loading="roomStatusLog.loading" style="width: 100%"
                :header-cell-style="{ background: '#eef5ff' }">
                <el-table-column prop="hotelName" label="酒店名称" width="260px">
                </el-table-column>
                <el-table-column prop="houseName" label="房型名称" width="190px">
                </el-table-column>
                <el-table-column prop="rpName" label="产品名称" width="100px">
                </el-table-column>
                <el-table-column prop="logDetails" label="操作">
                </el-table-column>
                <el-table-column prop="nickName" label="操作人" width="100px">
                </el-table-column>
                <el-table-column label="操作时间" width="160px">
                    <template slot-scope="scope">
                        {{ formattedDate(scope.row.createTime) }}
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="roomStatusLog.total > 0" :total="roomStatusLog.total"
                :page.sync="roomStatusLog.queryParams.pageNum" :limit.sync="roomStatusLog.queryParams.pageSize"
                @pagination="getRoomStatusLog" />
        </el-dialog>
    </div>
</template>

<script>

import { getHotelListAll, getPriceShowAllList } from "@/api/hotel/hotel";
import { getRoomStatusList } from "@/api/hotel/roomStatus";
import { postUpdateHouseDimension, postBatchSwitchRoom, postShelvesHouse } from "@/api/hotel/house";
import { postUpdateRpDimension, postShelvesRp } from "@/api/hotel/rp";
import { getRoomStatusLog } from "@/api/hotel/log";
import WeekEnd from '../week_end/index.vue'
import { getWeekDay } from '@/utils/timing-order'

export default {
    name: 'RoomStatus',
    components: {
        WeekEnd
    },
    data() {
        return {
            main: {
                loading: false,
                showSearch: true,
                queryParams: {
                    hotelId: undefined
                },
                hotelListAll: [],
                roomStatusList: [],
                columnList: [],
                columnList1: [],
                columnList2: [],

                // 起始时间
                startTime: undefined,
                // 表格时间区间
                columnDateRange: [],
                tableKey: 1,
                priceShowLoading: false
            },
            // 房型维度修改(保留房数量、非保留房数量、房态)
            updateHouseDimension: {
                isShow: false,
                form: {
                    rqRange: [],
                    roomStatus: "1",
                    nQuantityNum: undefined,
                    yQuantityNum: undefined
                },
                rules: {
                    rqRange: [
                        { required: true, message: "使用日期不能为空", trigger: "blur" },
                    ]
                }
            },
            // 产品维度修改(价格)
            updateRpDimension: {
                isShow: false,
                loading: false,
                form: {
                    rqRange: [],
                    ePrice: undefined,
                    ePriceWeekend: undefined
                },
                rules: {
                    rqRange: [
                        { required: true, message: "使用日期不能为空", trigger: "blur" },
                    ],
                    ePrice: [
                        { required: true, message: "房价不能为空", trigger: "blur" },
                    ],
                }
            },
            // 批量开关房
            batchSwitchRoom: {
                isShow: false,
                loading: false,
                form: {
                    rqRange: [],
                    switchRoom: false
                },
                rules: {
                    rqRange: [
                        { required: true, message: "使用日期不能为空", trigger: "blur" },
                    ]
                }
            },
            // 房态日志 
            roomStatusLog: {
                isShow: false,
                loading: false,
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    houseId: undefined,
                    logType: [],
                    dateRange: []
                },
                logData: [],
                total: 0,
            }
        }
    },
    mounted() {

    },
    created() {
        this.getHotelListAll();
        this.getColumnList();
        /*
        if (this.$route.query.hotelId) {
            this.main.queryParams.hotelId = Number(this.$route.query.hotelId);
            this.getRoomStatusList();
        }
        */
    },
    watch: {
        '$route.query.hotelId': {
            handler(newHotelId, oldHotelId) {
                if (this.$route.path === '/hotel/RoomStatus') {
                    if (this.$route.query.hotelId) {
                        this.main.columnList = [];
                        this.main.columnList1 = [];
                        this.main.columnList2 = [];
                        this.getColumnList();
                        this.main.queryParams.hotelId = Number(newHotelId);
                        this.getRoomStatusList();
                    }
                }
            },
            immediate: true // 立即执行一次，确保初始化时也获取数据
        },
    },
    methods: {
        // 获取所有酒店数据,用于酒店下拉框
        getHotelListAll() {
            getHotelListAll().then(response => {
                this.main.hotelListAll = response.data;
            }
            );
        },
        getRoomStatusList() {
            this.main.loading = true;
            getRoomStatusList({ hotelId: this.main.queryParams.hotelId, columnDateRange: this.main.columnDateRange }).then(response => {

                if (response.code === 200) {
                    this.main.roomStatusList = response.data
                }
            }
            ).catch((error) => {

            }).finally(() => {
                this.main.loading = false;
            });
        },
        handleRoomStatusQuery() {
            if (this.main.queryParams.hotelId) {
                this.getRoomStatusList();
            } else {
                this.$message.error('请选择酒店');
            }
        },
        getColumnList() {
            this.main.columnList.push({ columnName: '房型名称', houseName: 'houseName', houseRpName: 'houseRpName', type: 'type' });

            // 获取当前时间
            this.main.startTime = new Date();
            // 取10天间隔时间
            this.main.columnDateRange = this.getNextNDays();
            // 初始化日期字段
            this.handleColumn1();

            this.main.columnList2.push({ columnName: '操作', houseId: 'houseId', rpId: 'rpId', type: 'type' });
        },
        positioningTime(type) {
            if (type === 'after') {
                // 获取后十天
                this.main.startTime = this.getFutureDate(10);
            } else {
                // 获取前十天
                this.main.startTime = this.getFutureDate(-10);
            }
            // 取10天间隔时间
            this.main.columnDateRange = this.getNextNDays();
            // 初始化日期字段
            this.handleColumn1();
            // 获取数据
            this.getRoomStatusList();
        },
        startTimeChange() {
            // 取10天间隔时间
            this.main.columnDateRange = this.getNextNDays();
            // 初始化日期字段
            this.handleColumn1();
            // 获取数据
            this.getRoomStatusList();
        },
        handleColumn1() {
            this.main.columnList1 = [];
            let days = this.main.columnDateRange;
            for (let i = 0; i < days.length; i++) {
                const day = days[i];
                const weekDay = getWeekDay(day);
                const pro = day.replaceAll('-', '_');
                this.main.columnList1.push({
                    dataDay: day,
                    columnName: day.substring(5, day.length) + '[' + weekDay + ']',
                    houseStatus: 'houseStatus_' + pro,
                    nQuantityNum: 'nQuantityNum_' + pro,
                    yQuantityNum: 'yQuantityNum_' + pro,
                    houseDayId: 'houseDayId_' + pro,

                    rpPrice: 'rpPrice_' + pro,
                    ePrice: 'ePrice_' + pro,
                    rpStatus: 'rpStatus_' + pro,
                    rpDataId: 'rpDataId_' + pro,

                    type: 'type'
                })
            }
        },
        getNextNDays() {
            let dates = [];
            for (let i = 0; i <= 9; i++) {
                // 使用Date对象生成日期，并格式化为YYYY-MM-DD
                let date = this.getFutureDate(i);
                let dateStr = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
                dates.push(dateStr);
            }
            return dates;
        },
        getFutureDate(days) {
            const future = new Date(this.main.startTime);
            future.setDate(this.main.startTime.getDate() + days);
            return future;
        },
        roomStatusDataRowClassName({ row, rowIndex }) {
            if (row.type === '1') {
                return 'house-row'
            }
            return '';
        },
        openUpdateHouseDimension(row, dataDay) {
            if (row.noRpPrice) {
                this.$message.error('请先设置该产品在当前时间区间的采购价!');
                return;
            }
            this.updateHouseDimension.isShow = true;
            this.updateHouseDimension.form.houseName = row.houseName;
            this.updateHouseDimension.form.houseId = row.houseId;
            if (dataDay != '') {
                this.updateHouseDimension.form.rqRange = [dataDay, dataDay];
            } else {
                this.updateHouseDimension.form.rqRange = [];
            }
            this.updateHouseDimension.form.roomStatus = "1";
            this.updateHouseDimension.form.yQuantityNum = undefined;
            this.updateHouseDimension.form.nQuantityNum = undefined;
            this.updateHouseDimension.form.hotelId = row.hotelId;
        },
        postUpdateHouseDimension() {
            this.$refs["updateHouseDimensionRef"].validate(valid => {
                if (valid) {
                    postUpdateHouseDimension(this.updateHouseDimension.form).then(response => {
                        if (response.code === 200) {
                            this.$modal.msgSuccess("修改成功");
                            this.updateHouseDimension.isShow = false;
                            this.getRoomStatusList();
                        } else {
                            this.$modal.error(response.msg);
                        }
                    });
                }
            })
        },
        cancelUpdateHouseDimension() {
            this.updateHouseDimension.isShow = false;
        },
        openUpdateRpDimension(row, dataDay) {

            if (row.noRpPrice) {
                this.$message.error('请先设置该产品在当前时间区间的采购价!');
                return;
            }
            this.updateRpDimension.isShow = true;
            this.updateRpDimension.form.rpId = row.rpId;
            this.updateRpDimension.form.hotelId = row.hotelId;
            this.updateRpDimension.form.houseId = row.houseId;
            this.updateRpDimension.form.houseRpName = row.houseRpName;
            if (dataDay != '') {
                this.updateRpDimension.form.rqRange = [dataDay, dataDay];
            } else {
                this.updateRpDimension.form.rqRange = [];
            }
            this.updateRpDimension.form.ePrice = undefined;
            this.updateRpDimension.form.ePriceWeekend = undefined;
        },
        postUpdateRpDimension() {
            this.$refs["updateRpDimensionRef"].validate(valid => {
                if (valid) {
                    this.updateRpDimension.loading = true;
                    postUpdateRpDimension(this.updateRpDimension.form).then(response => {
                        if (response.code === 200) {
                            this.$modal.msgSuccess("修改成功");
                            this.updateRpDimension.isShow = false;
                            this.getRoomStatusList();
                        }
                    }).catch((error) => {

                    }).finally(() => {
                        this.updateRpDimension.loading = false;
                    });;
                }
            })
        },
        cancelUpdateRpDimension() {
            this.updateRpDimension.isShow = false;
        },
        postShelvesRp(rpId) {
            const that = this;
            this.$modal.confirm('确定下线该产品？').then(function () {
                postShelvesRp({ rpId }).then(response => {
                    if (response.code === 200) {
                        that.$modal.msgSuccess("下线产品成功");
                        that.getRoomStatusList();
                    } else {
                        that.$message.error('下线失败,请联系管理员');
                    }
                });
            })
        },
        postShelvesHouse(houseId, hotelId) {
            const that = this;
            this.$modal.confirm('确定下线该房型？').then(function () {
                postShelvesHouse({ houseId, hotelId }).then(response => {
                    if (response.code === 200) {
                        that.$modal.msgSuccess("下线房型成功");
                        that.getRoomStatusList();
                    } else {
                        that.$message.error('下线失败,请联系管理员');
                    }
                });
            })
        },
        openBatchSwitchRoom() {
            if (this.main.queryParams.hotelId) {
                this.batchSwitchRoom.isShow = true;
            } else {
                this.$message.error('请选择酒店');
            }
        },
        handleSwitchRoomChange(value) {
            this.batchSwitchRoom.form.switchRoom = value;
        },
        postBatchSwitchRoom() {
            this.$refs["batchSwitchRoomRef"].validate(valid => {
                if (valid) {
                    this.batchSwitchRoom.form.hotelId = this.main.queryParams.hotelId;
                    this.batchSwitchRoom.loading = true;
                    postBatchSwitchRoom(this.batchSwitchRoom.form).then(response => {
                        if (response.code === 200) {
                            this.$modal.msgSuccess("操作成功");
                            this.batchSwitchRoom.isShow = false;
                            this.batchSwitchRoom.loading = false;
                            this.getRoomStatusList();
                        }
                    });
                }
            })
        },
        cancelBatchSwitchRoom() {
            this.batchSwitchRoom.isShow = false;
        },
        getRoomStatusLog() {
            this.roomStatusLog.queryParams.hotelId = this.main.queryParams.hotelId;
            this.roomStatusLog.loading = true;
            getRoomStatusLog(this.roomStatusLog.queryParams).then(response => {
                console.log(response);
                this.roomStatusLog.logData = response.rows;
                this.roomStatusLog.total = response.total;
                this.roomStatusLog.loading = false;
            }
            );
        },
        openRoomStatusLog() {
            if (this.main.queryParams.hotelId) {
                this.roomStatusLog.isShow = true;
                this.getRoomStatusLog();
            } else {
                this.$message.error('请选择酒店');
            }
        },
        handleroomStatusLogQuery() {
            this.getRoomStatusLog();
        },
        getPriceShowAllList() {
            if (this.main.queryParams.hotelId) {
                if (this.main.roomStatusList.length > 0) {
                    this.main.priceShowLoading = true;
                    getPriceShowAllList(this.main.queryParams).then(response => {
                        if (response.code === 200) {
                            let roomStatusList = this.main.roomStatusList;
                            let day = response.data.day;
                            let data = response.data.priceShowAllList;
                            for (let i = 0; i < roomStatusList.length; i++) {
                                const type = roomStatusList[i].type;
                                const houseRpName = roomStatusList[i].houseRpName;
                                if (type === "2") {
                                    for (let j = 0; j < data.length; j++) {
                                        if (houseRpName === data[j].houseRpName) {
                                            var propertyName = 'show_' + day.replaceAll('-', '_');
                                            this.main.roomStatusList[i][propertyName] = data[j].show;
                                            break;
                                        }
                                    }
                                }
                            }
                            this.main.tableKey += 1;
                        }
                    }
                    ).catch((error) => {

                    }).finally(() => {
                        this.main.priceShowLoading = false;
                    });;
                } else {
                    this.$message.error('请先查询数据');
                }
            } else {
                this.$message.error('请选择酒店');
            }
        },
        getColor(value) {
            // 根据value返回不同的颜色
            if (value === '未露出') return 'red';
            else if (value === '已露出') return 'green';
        }
    },
    computed: {
        dynamicFields() {
            return function (row, filedName) {
                // 这里的greeting和name是传递进来的参数
                return row[filedName];
            };
        },
        dynamicEStatus() {
            return function (status) {
                // 这里的greeting和name是传递进来的参数
                if (status === 1) {
                    return true;
                } else {
                    return false;
                }
            };
        },
        isYQuantityNumEmpty() {
            if (this.updateHouseDimension.form.yQuantityNum != undefined && this.updateHouseDimension.form.yQuantityNum != '') {
                this.updateHouseDimension.form.roomStatus = '2';
                return true;
            }
        },
        formattedDate() {
            return function (date) {
                return date.replace(/T/g, ' ').trim();
            };
        },
    }
}
</script>

<style>
.roomStatusTable {
    font-size: 12px;
}

.roomStatusTable .house-row {
    background: #F2F7FD;
}

.roomStatusTable .rp-row {
    background: #f0f9eb;
}

.houseRowClass {
    display: flex;
    justify-content: center;
    align-items: center;
}

.houseRowClass>div:first-child {
    flex: 1;
    /* 这将会使这个div占据剩余空间 */
    text-align: center;
}

.houseRowClass>div:first-child {
    flex: 1;
    /* 这将会使这个div占据剩余空间 */
    text-align: center;
}

.houseRowClass>div:nth-child(2) {
    text-align: right;
}

.RPRowClass {
    display: flex;
    justify-content: space-between;
}

.modifyInput {
    color: #1890FF;
    cursor: pointer;
}

.weekEndVue {
    margin-left: 30px;
}
</style>